<template>
    <IDrawer v-model="defaultValue" :loading="loading" :width="860" title="对接设置">
        <Form :model="data" :label-width="100" :rules="ruleValidate" ref="formCreate">
            <FormItem label="所属客户" prop="customer_id">
                <RemoteSelect url="common/select/customer" disabled v-model="data.customer_id"></RemoteSelect>
            </FormItem>
            <FormItem label="产品代码" prop="code">
                <Input v-model="data.code" disabled></Input>
            </FormItem>
            <FormItem label="产品标题" prop="title">
                <Input v-model="data.title"></Input>
            </FormItem>
            <FormItem label="毛重" prop="gross_weight">
                <Input v-model="data.gross_weight" number></Input>
            </FormItem>
            <FormItem label="品牌" prop="brand">
                <Input v-model="data.brand"></Input>
            </FormItem>
            <FormItem label="海关编码" prop="customs.code">
                <RemoteSelect url="common/select/hsCode" v-model="data.customs.code" @on-change="changeHsCode"></RemoteSelect>
            </FormItem>

            <div style="padding: 20px" v-if="data.customs.code">
                <Card title="产品海关备案资料">
                    <Row>
                        <Col :span="12">
                            <FormItem label="法定第一单位">
                                <RemoteSelect url="common/select/unit" v-model="data.customs.unit1" disabled></RemoteSelect>
                            </FormItem>
                        </Col>
                        <Col :span="12">
                            <FormItem label="法定第二单位">
                                <RemoteSelect url="common/select/unit" v-model="data.customs.unit2" disabled></RemoteSelect>
                            </FormItem>
                        </Col>
                        <Col :span="12">
                            <FormItem label="法定第一数量" prop="customs.qy1">
                                <Input v-model="data.customs.qy1" number></Input>
                            </FormItem>
                        </Col>
                        <Col :span="12">
                            <FormItem label="法定第二数量" prop="customs.qy2">
                                <Input v-model="data.customs.qy2" number></Input>
                            </FormItem>
                        </Col>
                        <Col :span="12">
                            <FormItem label="海关品名" prop="customs.name">
                                <Input v-model="data.customs.name"></Input>
                            </FormItem>
                        </Col>
                        <Col :span="12">
                            <FormItem label="申报单位" prop="customs.unit">
                                <RemoteSelect showCode url="common/select/unit" v-model="data.customs.unit"></RemoteSelect>
                            </FormItem>
                        </Col>
                        <Col :span="12">
                            <FormItem label="原产国" prop="customs.country">
                                <RemoteSelect showCode url="common/select/country" v-model="data.customs.country"></RemoteSelect>
                            </FormItem>
                        </Col>
                        <Col :span="12">
                            <FormItem label="净重" prop="customs.net_weight">
                                <Input v-model="data.customs.net_weight" number></Input>
                            </FormItem>
                        </Col>
                        <Col :span="24">
                            <FormItem label="申报要素" prop="customs.element">
                                <Input v-model="data.customs.element" >
                                    <Button slot="append" icon="md-barcode" @click="elementModal = true"></Button>
                                </Input>
                            </FormItem>
                        </Col>
                    </Row>
                </Card>
            </div>
        </Form>
        <Modal title="规格型号" v-model="elementModal" @on-ok="elementModalOk">
            <Form :label-width="100">
                <FormItem v-for="(item, index) in elements" :key="index" :label="item">
                    <Input v-model="elementValues[index]"></Input>
                </FormItem>
            </Form>
        </Modal>
        <div slot="footer">
            <Button type="primary" icon="ios-add" @click="submit('formCreate')">提交</Button>
            <Button type="warning" icon="md-log-out" @click="defaultValue = false">返回</Button>
        </div>
    </IDrawer>
</template>

<script>
    import IForm from "../../../components/content/form";
    import contentDrawer from "../../../mixins/contentDrawer";
    import IDrawer from "../../../components/content/drawer";
    import IData from "./data";
    import RemoteSelect from "../../../components/form/remoteSelect";

    export default {
        name: "create",
        mixins: [contentDrawer, IData],
        components: {RemoteSelect, IForm, IDrawer},
        data() {
            return {}
        },
        mounted(){
            this.getData();
        },
        methods: {
            getData(){
                this.loading = true;
                this.$http.get(`product/index/${this.props.id}/edit`).then((res) => {
                    this.data = res;
                }).finally(() => {
                    this.loading = false;
                });
            },
            submit(data) {
                this.validate(data).then(() => {
                    this.loading = true;
                    this.$http.put(`product/index/${this.props.id}`, this.data).then(() => {
                        this.getData();
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            }
        }
    }
</script>

<style scoped>

</style>
